<template>
  <Header/>
  <a-flex gap="middle" vertical  align="left" style="margin-top: 120px">
    <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
    <a-row>
      <a-col :span="4"></a-col>
      <a-col :span="16">
        <a-skeleton active v-if="loading"/>
        <a-flex gap="middle"  align="left" style="margin: 20px">
          <a-card v-for="opinion in opinionList" :title="opinion.mainOpinion.tittle" :bordered="false" style="width: 300px">
            <a-comment>
              <template #actions>
                <span key="comment-basic-like">
                  <a-tooltip title="Like">
                    <template v-if="action === 'liked'">
                      <LikeFilled @click="like" />
                    </template>
                    <template v-else>
                      <LikeOutlined @click="like" />
                    </template>
                  </a-tooltip>
                  <span style="padding-left: 8px; cursor: auto">
                    {{ likes }}
                  </span>
                </span>
                <span key="comment-basic-dislike">
                <a-tooltip title="Dislike">
                  <template v-if="action === 'disliked'">
                    <DislikeFilled @click="dislike" />
                  </template>
                  <template v-else>
                    <DislikeOutlined @click="dislike" />
                  </template>
                </a-tooltip>
                <span style="padding-left: 8px; cursor: auto">
                  {{ dislikes }}
                </span>
              </span>
                <CheckOutlined @click="handlePermit(opinion)" v-if="auditFlag"/>
              </template>
              <template #author><a>{{opinion.mainOpinion.user.nickname}}</a></template>
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
              </template>
              <template #content>
                <p style="text-align: left">
                  {{opinion.mainOpinion.content}}
                </p>
              </template>
              <template #datetime>
                <a-tooltip :title="dayjs().format('YYYY-MM-DD HH:mm:ss')">
                  <span>{{ opinion.mainOpinion.createTime }}</span>
                </a-tooltip>
              </template>
            </a-comment>
          </a-card>

        </a-flex>
      </a-col>
      <a-col :span="4"></a-col>
    </a-row>
  </a-flex>

</template>

<script setup>
import Header from "@/components/TopBar.vue";
import {h, ref, reactive, onUpdated, onBeforeMount, onBeforeUnmount, watch} from 'vue';
import { MailOutlined, AppstoreOutlined, LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined, CheckOutlined} from '@ant-design/icons-vue';
import Pubsub from "pubsub-js";
import {getSession} from "@/api/LoginRequest.js";
import {handleOpinion, listOpinion, queryById} from "@/api/OpinionRequest.js";
import {message} from "ant-design-vue";
import router from "@/router/index.js";

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

const opinionList = ref([])
const loading = ref(false)

const likes = ref(0);
const dislikes = ref(0);
const action = ref();

const like = () => {
  likes.value = 1;
  dislikes.value = 0;
  action.value = 'liked';
};
const dislike = () => {
  likes.value = 0;
  dislikes.value = 1;
  action.value = 'disliked';
};

const current = ref(['1']);
const items = ref([
  {
    key: '1',
    icon: () => h(MailOutlined),
    label: '公示',
    title: '公示',
  }
]);

//是否可审核的状态标
const auditFlag = ref(false)
function handelItems() {
  getSession().then(res => {
    if(res.code === 0){
      items.value.push({
        key: '2',
        icon: () => h(AppstoreOutlined),
        label: '我的帖子',
        title: '我的帖子',
      })
      if( res.data.dataMap.userSession.leve === 2) {
        items.value.push({
          key: '3',
          icon: () => h(AppstoreOutlined),
          label: '待审核',
          title: '待审核',
        })
      }
    } else {
      if(items.value.length === 3) {
        items.value.pop();
        items.value.pop();
      }
      if (items.value.length === 2) {
        items.value.pop();
      }
    }
  })
}

function getOpinions(model, opinionId = -1){
  opinionList.value = []
  loading.value = true
  listOpinion(model, opinionId).then(res => {
    if(res.code === 0) {
      opinionList.value = res.data
      console.log('刷新opinion', opinionList.value);
    } else {
      message.error(res.msg);
    }
  }).finally(() => {
    loading.value = false
  })
}

function handlePermit(opinion, type = 1) {
  console.log('审核帖子', opinion);
  let id = opinion.mainOpinion.opinionId;
  queryById(id).then(res => {
    if(res.code === 0) {
      let opinion = res.data;
      handleOpinion(type, opinion.opinionId, opinion.userId,
      opinion.status, opinion.fatherId, opinion.tittle, opinion.content, opinion.createTime).then(res => {
        if(res.code === 0) {
          message.success('审核成功');
          getOpinions(current.value[0])
        } else {
          message.error(res.msg);
        }
      })
    } else {
      message.error(res.msg);
    }
  })
}

const loginSign = Pubsub.subscribe('login-sign', (msg, data) => {
  handelItems();
})

watch(current, (val) => {
  auditFlag.value = val[0] === '3'
  getOpinions(val[0])
})

onBeforeMount(_ => {
  handelItems();
  getOpinions(1)
  localStorage.setItem("redirectPath", router.currentRoute.value.fullPath)
})

onBeforeUnmount(_ => {
  Pubsub.unsubscribe(loginSign)
})
</script>

<style scoped>

</style>